<template>
    <el-form inline  class="demo-form-inline">
        <el-form-item label="是否有效">
            <el-select v-model="query.valid" placeholder="请选择">
                <el-option  label="有效" :value = 1 />
                <el-option  label="无效" :value = 0 />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain  activity @click="queryCard">查询</el-button>
            <el-button type="primary" plain  activity @click="reset">重置</el-button>
            <el-button type="primary" plain  @click="addCard">新增</el-button>
        </el-form-item>
    </el-form>
    <el-divider />
    <el-table ref="table" border  v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index"  label="序号" width="100px" />
        <el-table-column align="center"  prop="title" label="标题"/>
        <el-table-column align="center"  prop="url" label="图片">
            <template v-cloak #default="scope">
                <el-image style="width: 100px; height: 100px"
                          :preview-src-list="[scope.row.url]"
                          :src="scope.row.url" fit="fill" :preview-teleported="true" />
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="valid" label="是否有效" >
            <template v-cloak #default="scope">
                {{scope.row.valid == 1 ? '有效':'无效'}}
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="updateTime" label="更新时间" >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center"  label="操作">
            <template #default="scope">
                <el-link title="修改" type="primary" @click="editCard(scope.row.id)">
                    <el-icon :size="20">
                    <Edit />
                </el-icon>
                </el-link>
                &nbsp;
                <el-popconfirm title="删除？" @confirm="deleteCard(scope.row.id)"  @cancel="">
                    <template #reference>
                        <el-link type="danger" title="删除">
                            <el-icon :size="20">
                                <Delete />
                            </el-icon>
                        </el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                style="display: flex;align-items:center;justify-content:center;"
                v-model:currentPage="query.currentPage"
                v-model:page-size="query.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="queryCard"
                @current-change="queryCard"
        />
    <ModCard ref="modCard"  @reload="queryCard" :type="data.type" :id="data.id" />
</template>

<script setup>
    import ModCard from '@/components/portal/ModCard.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref,  reactive, onMounted} from 'vue'
    import moment from 'moment'

    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    })

    let loading = ref(true)
    let modCard= ref(null)

    let query = reactive({currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryCard()
    })
    function queryCard(){
        request.post("/api/card/getCards", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }
    function reset (){
        query.content = ""
        query.type = ""
        query.valid = ""
    }

    function addCard(){
        modCard.value.showDialog = true
        data.type = "add"
    }
    function deleteCard(id){
        request.get(`/api/card/delete/${id}`).then(resp => {
            queryCard()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }
    function editCard(id){
        data.id = id
        data.type = "edit"
        modCard.value.showDialog = true
    }

</script>
<style lang="css">
    .address {overflow:hidden;white-space:nowrap;word-wrap:break-word;text-overflow:"ellipsis";}
    .head {background-color: #9561cc}
    [v-cloak]{
        display: none  !important;
    }
</style>